<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import LeftContent from './left.vue'
import RightContent from './right.vue'
import CenterContent from './center.vue'
const currentTime = ref('');
let timer;
const updateClock = () => {
    const now = new Date();

    // 星期映射（注意：getDay()返回0=周日，6=周六）
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekDay = weekDays[now.getDay()];

    // 日期部分
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');

    // 时间部分
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    // 组合完整日期时间字符串（含星期）
    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay} `;

};
// 新增全屏相关变量
const isFullscreen = ref(false)
let fullscreenElement = null

// 全屏功能实现
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        fullscreenElement = document.documentElement

        // 处理不同浏览器前缀
        if (fullscreenElement.requestFullscreen) {
            fullscreenElement.requestFullscreen()
        } else if (fullscreenElement.webkitRequestFullscreen) { /* Safari */
            fullscreenElement.webkitRequestFullscreen()
        } else if (fullscreenElement.msRequestFullscreen) { /* IE11 */
            fullscreenElement.msRequestFullscreen()
        }
        isFullscreen.value = true
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitExitFullscreen) { /* Safari */
            document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) { /* IE11 */
            document.msExitFullscreen()
        }
        isFullscreen.value = false
    }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
    isFullscreen.value = !!document.fullscreenElement
}
const handleGo = () => {
    let token = localStorage.getItem('token')
    window.open(`http://jinchaoiot.yunctime.com/#/?token=${token}`, '_blank');
}

onMounted(async () => {
    updateClock(); // 初始化显示
    timer = setInterval(updateClock, 1000); // 每秒更新
    // 初始化全屏状态
    isFullscreen.value = !!document.fullscreenElement
    // 添加全屏状态监听
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange) // Safari
    document.addEventListener('msfullscreenchange', handleFullscreenChange) // IE11

})

onBeforeUnmount(() => {
    clearInterval(timer); // 清除定时器

    // 清理事件监听
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
    document.removeEventListener('msfullscreenchange', handleFullscreenChange)
})

</script>
<template>
    <div class="largeScreen">
        <!--头部背景  -->
        <div class="top">
            <img src="http://jinchao.yunctime.com/profile/upload/2025/03/26/topBg_20250326195106A003.png" alt=""
                class="topBg" />
            <div class="title">劲潮生物大数据中心</div>
        </div>
        <!-- 左边背景 -->
        <img src="../assets/img/rightBg.png" alt="" class="leftBg" />
        <!-- 右边背景 -->
        <img src="../assets/img/leftBg.png" alt="" class="rightBg" />
        <!--底部背景  -->
        <img src="http://jinchao.yunctime.com/profile/upload/2025/03/26/btmBg_20250326195132A004.png" alt=""
            class="btmBg" />
        <!-- 内容 -->
        <div class="content">
            <!-- 左侧 -->
            <div class="contentLeft">
                <LeftContent></LeftContent>
            </div>
            <!-- 中间 -->
            <div class="contentCenter">
                <CenterContent></CenterContent>
            </div>
            <!-- 右侧 -->
            <div class="contentRight">
                <RightContent></RightContent>
            </div>
        </div>
        <!-- 时间 -->
        <div class="time">
            <span @click="handleGo">【物联网(IOT)平台】</span> {{ currentTime }} <span @click="toggleFullscreen">[
                {{ isFullscreen ? '退出全屏' : '全屏' }} ]</span>
        </div>
    </div>
</template>

<style scoped lang="scss">
.largeScreen {
    width: 100%;
    height: 100%;
    background: url("http://jinchao.yunctime.com/profile/upload/2025/03/26/indexBg_20250326195006A002.png");
    background-size: cover;
    /* 背景图片填充满整个元素 */
    background-repeat: no-repeat;
    /* 不重复背景图片 */
    position: relative;

    .top {
        width: 80%;
        height: 8%;
        position: absolute;
        top: 0;
        left: 10%;

        .title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 35px;
            color: #ffffff;
        }

        .topBg {
            width: 100%;
        }
    }

    .btmBg {
        width: 80%;
        height: 8%;
        position: absolute;
        bottom: 0;
        left: 10%;
    }

    .rightBg {
        position: absolute;
        top: 10%;
        left: 0;
        width: 52px;
        height: 80%;
    }

    .leftBg {
        position: absolute;
        top: 10%;
        right: 0;
        width: 52px;
        height: 80%;
    }

    .content {
        display: flex;
        align-items: center;
        padding: 5% 3%;
        height: 100%;
        box-sizing: border-box;

        .contentLeft {
            width: 25%;
            height: 100%;
            background: url("http://jinchao.yunctime.com/profile/upload/2025/03/26/contentBg_20250326195230A005.png");
            background-size: cover;
            /* 背景图片填充满整个元素 */
            background-repeat: no-repeat;
            /* 不重复背景图片 */
            padding: 2% 1% 0;
            box-sizing: border-box;

        }

        .contentCenter {
            width: 50%;
            height: 100%;
        }

        .contentRight {
            width: 25%;
            height: 100%;
            background: url("http://jinchao.yunctime.com/profile/upload/2025/03/26/contentBg_20250326195230A005.png");
            background-size: cover;
            /* 背景图片填充满整个元素 */
            background-repeat: no-repeat;
            /* 不重复背景图片 */
            padding: 2% 1%;
            box-sizing: border-box;
        }
    }

    .time {
        position: absolute;
        right: 56px;
        top: 56px;
        font-size: 15px;

        span {
            cursor: pointer;
        }
    }
}</style>
